import { useState } from 'react'
import BaseLayout from '@/layouts/BaseLayout/BaseLayout'
import Codepensvg from '@/utils/Codepensvg'
import Copysvg from '@/utils/Copysvg'
import { Divider } from 'ygbh'
import classNames from 'classnames';

const codeUrl1 = 'https://codepen.io/xiebaolin/pen/PoKGBRR';
const codeVal1 = `
import { Divider } from 'ygbh';
ReactDOM.render(
  <>
    <div>
	<span>内容1-1</span>
	<Divider></Divider>
	<span>内容1-2</span>
	<Divider dashed></Divider>
	<span>内容1-3</span>
	<Divider style={style}></Divider>
	<span>内容1-4</span>
    </div>
    <div>
	<span>内容2-1</span>
	<Divider type="vertical"></Divider>
	<span>内容2-2</span>
	<Divider dashed type="vertical"></Divider>
	<span>内容2-3</span>
	<Divider className='divider01' type="vertical"></Divider>
	<span>内容2-4</span>
    </div>
  </>,
  mountNode,
);
`;
const codeUrl2 = 'https://codepen.io/xiebaolin/pen/PoKGBRR';
const codeVal2 = `
import { Divider } from 'ygbh';
ReactDOM.render(
  <>
    <div>
	<span>内容3-1</span>
	<Divider>Text1</Divider>
	<span>内容3-2</span>
	<Divider orientation="left">Text2</Divider>
	<span>内容3-3</span>
	<Divider orientation="right">Text3</Divider>
	<span>内容3-4</span>
    </div>
  </>,
  mountNode,
);
`;
function Demo() {
	//实例-start
	const [showCoreFlag1, setShowCoreFlag1] = useState(false);
	
	const classString1 = classNames('source-case-mod', {
		'show-case-core': showCoreFlag1,
	});
	const toggleCoreFlag1 = () => {
		setShowCoreFlag1(!showCoreFlag1);
	};
	const copyCaseFn1 = () => {
		let input:any = document.getElementById("globalInputCopy");
		input.value = codeVal1; // 修改文本框的内容
		input.select(); // 选中文本
		document.execCommand("copy");
		input = null;
	};
	//实例-end
	//实例-start
	const [showCoreFlag2, setShowCoreFlag2] = useState(false);
	
	const classString2 = classNames('source-case-mod', {
		'show-case-core': showCoreFlag2,
	});
	const toggleCoreFlag2 = () => {
		setShowCoreFlag2(!showCoreFlag2);
	};
	const copyCaseFn2 = () => {
		let input:any = document.getElementById("globalInputCopy");
		input.value = codeVal2; // 修改文本框的内容
		input.select(); // 选中文本
		document.execCommand("copy");
		input = null;
	};
	//实例-end
	return (
		<BaseLayout>
		    <h2 className="intro-title">Divider 分割线</h2>
		    <p className="intro-content">区隔内容的分割线。</p>
			<h3 className="show-case-title">代码演示</h3>
			{/*演示*/}
			<div className="demo-block">
			    <section className={classString1}>
			        <section className="code-box-demo">
			            <div>
							<span>内容1-1</span>
							<Divider></Divider>
							<span>内容1-2</span>
							<Divider dashed></Divider>
							<span>内容1-3</span>
						</div>

						<div>
							<span>内容2-1</span>
							<Divider type="vertical"></Divider>
							<span>内容2-2</span>
							<Divider dashed type="vertical"></Divider>
							<span>内容2-3</span>
							<Divider className='divider01' type="vertical"></Divider>
							<span>内容2-4</span>
						</div>

			        </section>
			        <section className="code-box-meta">
			            <div className="code-box-title">基本</div>
			            <div className="code-box-description">默认为水平分割线，可在中间加入文字。</div>
			            <div className="code-box-actions">
			            	<a href={codeUrl1} className="code-box-code-action code-box-code-action1" target='_blank' title='在 CodePen 中打开'>
			            		<Codepensvg></Codepensvg>
			            	</a>
			            	<span className="code-box-code-action code-box-code-action2" title='复制代码' onClick={copyCaseFn1}>
			            	    <Copysvg></Copysvg>
			            	</span>
			            	<span className="code-box-code-action code-box-code-action3" title='显示代码' onClick={toggleCoreFlag1}></span>
			            </div>
			        </section>
			        <section className="highlight-wrapper">
			            <textarea className="demo-core-box height400" readOnly={true} defaultValue={codeVal1}></textarea>
			        </section>
				</section>
			</div>
			{/*演示*/}
			<div className="demo-block">
			    <section className={classString2}>
			        <section className="code-box-demo">
						<div>
							<span>内容3-1</span>
							<Divider>Text1</Divider>
							<span>内容3-2</span>
							<Divider orientation="left">Text2</Divider>
							<span>内容3-3</span>
							<Divider orientation="right">Text3</Divider>
							<span>内容3-4</span>
						</div>
			        </section>
			        <section className="code-box-meta">
			            <div className="code-box-title">基本</div>
			            <div className="code-box-description">默认为水平分割线，可在中间加入文字。</div>
			            <div className="code-box-actions">
			            	<a href={codeUrl2} className="code-box-code-action code-box-code-action1" target='_blank' title='在 CodePen 中打开'>
			            		<Codepensvg></Codepensvg>
			            	</a>
			            	<span className="code-box-code-action code-box-code-action2" title='复制代码' onClick={copyCaseFn2}>
			            	    <Copysvg></Copysvg>
			            	</span>
			            	<span className="code-box-code-action code-box-code-action3" title='显示代码' onClick={toggleCoreFlag2}></span>
			            </div>
			        </section>
			        <section className="highlight-wrapper">
			            <textarea className="demo-core-box" readOnly={true} defaultValue={codeVal2}></textarea>
			        </section>
				</section>
			</div>

		    {/*介绍*/}
			<h3 className="base-title">Attributes</h3>
			<table className="attri-table">
				<thead>
					<tr>
						<th>参数</th>
						<th>说明</th>
						<th>类型</th>
						<th>默认值</th>
					</tr>
				</thead>
				<tbody>
					<tr>
						<td>type</td>
						<td>设置分割线方向</td>
						<td>horizontal / vertical</td>
						<td>horizontal</td>
					</tr>
					<tr>
						<td>className</td>
						<td>分割线样式类</td>
						<td>string</td>
						<td>--</td>
					</tr>
					<tr>
						<td>dashed</td>
						<td>是否虚线</td>
						<td>boolean</td>
						<td>false</td>
					</tr>
					<tr>
						<td>orientation</td>
						<td>分割线标题的位置</td>
						<td>left | right | center</td>
						<td>center</td>
					</tr>
					<tr>
						<td>style</td>
						<td>分割线样式对象</td>
						<td>CSSProperties</td>
						<td>--</td>
					</tr>
				</tbody>
			</table>
		</BaseLayout>
	)
}

export default Demo
